<template>
	<scroll-view scroll-y class="bgf5 group c00" :style="{height: 'calc(100vh - 156rpx - ' + statusBar + 'px)'}">
		<view class="bg6c mt11 mx15">
			<image class="bgImg r6" src="/static/img/bg/card_bg2.png" mode="aspectFill"></image>
			<view class="box pt14 px9 boxS">
				<view class="flex flexC fs13">
					<view class="flex1">我的积分（分）</view>
					<view class="flex flexC">
						<text class="mr4">积分使用明细</text>
						<uni-icons type="right" size="14" color="#6F3D00"></uni-icons>
					</view>
				</view>
				<view class="mt10 flex flexC">
					<text class="fs21 bold6">100</text>
					<view class="flex flexC pt5">
						<text class="fs10 mx4">积分使用规则</text>
						<uni-icons type="help-filled" size="16" color="#6F3D00"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="bold6 fs15 mx15 mt15 mb8">
			<text class="fs14 c57">▎</text>
			<text>充值金额</text>
		</view>
		<view v-for="(item,index) in 4" :key="index" class="rel bgff r6 my10 mx16 shadow">
			<view class="flex flexC fs12 box">
				<view class="aliC leftBox">
					<view class="fs10 tips">门店通用券</view>
					<view class="px10 mt10">
						<text class="fs14">￥</text>
						<text class="fs30 bold6">5.44</text>
					</view>
					<view class="fs10 px10">满减优惠券</view>
				</view>
				<view class="flex1 c99 fs10 borr p8">
					<view class="fs14 c33 mb5 bold6">所需积分:100</view>
					<view class="">
						<text>类 型:满减优惠券</text>
						<text>有效期: 3个月</text>
					</view>
					<view class="">
						<text>适用于:雀侠任意门店预约或者续单时订单金额满35.0元可用</text>
					</view>
				</view>
				<view class="pl8 pr12">
					<text v-if="true" class="bgf6c r40 px10 py2 c33" >已兑换</text>
					<text v-else class="bgf6c r40 px10 py2 c33" @click="take(item)">立即兑换</text>
				</view>
			</view>
		</view>
		
		<!-- 团购券使用范围弹框 -->
		<uni-popup type="center" ref="popup">
			<view class="bgff r10 px30 pb20 flex flexC flexJC flexCol">
				<view class="fs16 bold6 py22">团购券使用范围</view>
				<view class="bor57 aliC" >
					<view class="flex flexC borb57">
						<view class="left py5">适用门店</view>
						<view class="right py5">适用包间</view>
					</view>
					<view class="flex flexC fs12" v-for="item in currentShopRoom">
						<view class="left">【{{item.shop_name}}】</view>
						<view class="right">
							<view :key="index" class="py4">{{item.room_name}}</view>
						</view>
					</view>
				</view>
				<button class="bgf6c r40 w-15 fs14 mt20" @click="$refs.popup.close()">好的，知道啦</button>
			</view>
		</uni-popup>
	</scroll-view>
</template>

<script>
	export default {
		name:"group-coupon",
		props: {
			statusBar: {
				type: Number,
				default: 20
			},
			selectShop: {
				type: [String, Number],
				default: ''
			}
		},
		data() {
			return {
				isChecked: false,
				page:1,
				list:[],
				check:false,
				currentShopRoom:[]
			};
		},
		methods: {
			
			buy(item){
				let param = {
					id:item.id,
				};
				let that = this;
				this.$api.addTuanOrder(param).then(res => {
					if (res.code == 1) {
				
						that.wechatPay(res.data.payInfo)

					} else {
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
				})
			},
			
			
			wechatPay(payConfig) {
				let that = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payConfig.timeStamp,
					nonceStr: payConfig.nonceStr,
					package: payConfig.package,
					signType: payConfig.signType,
					paySign: payConfig.paySign,
					success: function(res) {
						
						uni.showModal({
							title:"购买提示",
							content:"购买成功赶紧使用吧",
							showCancel:false,
							complete() {
								
							}
						})
					},
					fail: function(err) {
						uni.showToast({
							title: "取消购买",
							icon: 'none'
						});
					}
				});
			},
			
			openItem(item){
				
				// for(var i=0;i<this.list.length;i++){
				// 	this.list[i].check = false;
				// }
				this.currentShopRoom = item.rooms;
				this.check = !this.check;
		
			},
			look(item){
				this.$refs.popup.open();
				
				
			},
			take(item){
				let param = {
					id: item.id,
				};
				let that = this;
				this.$api.takeCoupon(param).then(res => {
					if (res.code == 1) {
				
						item.is_take = 1;
				
					} 
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				})
			},
			getData(selectShop) {
				
				let param = {
					shop_id:selectShop.id,
					page:this.page
				};
				let that = this;
				this.$api.shopCouponList(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.list = res.data;
					} else {
				
					}
				})
				console.log(selectShop)
				// this.$nextTick(() => {
				// 	this.$refs.popup.open();
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
.group {
	.bg6c {
		color: #6F3D00;
		position: relative;
		.bgImg {
			width: 100%;
			height: 160rpx;
			position: relative;
			z-index: 1;
		}
		.box {
			width: 100%;
			position: absolute;
			top: 0;
			height: 160rpx;
			z-index: 9;
		}
	}
	.rel {position: relative;}
	.bgf2 {
		color: #858585;
		.cff0 {
			color: #858585;
		}
	}
	.borrd {border-right: 4rpx dashed #eee;}
	.passed {
		width: 86rpx;
		height: 86rpx;
		position: absolute;
		top: 10rpx;
		right: 10rpx;
	}
	.box {
		position: relative;
		.origin {text-decoration-line: line-through;}
		.tips {
			position: absolute;
			top: 0;
			left: 0;
			background-color: #FFFBE3;
			border-radius: 10rpx 0 10rpx 0;
			color: #FABB22;
			padding: 4rpx 30rpx;
		}
		.leftBox {
			color: #FABB22;
		}
	}
	.borbb {
		border-bottom: 4rpx dashed #eee;
	}
	.w10 {
		width: 20rpx;height: 12rpx;
		transform: rotate(90deg);
		transition: .5s;
		&.up {
			transform: rotate(180deg);
		}
	}
	.borb57 {border-bottom: 2rpx solid #576DAB;}
	.left {width: 200rpx;height: 100%;}
	.right {width: 300rpx;border-left: 2rpx solid #576DAB;}
}
</style>